<template>
  <div class="app-container">
      <el-tabs ref="tabs" v-model="active">
        <el-tab-pane name="first">
          <el-tabs v-model="activeName">
            <el-tab-pane label="薪酬组" name="first">
              <el-button
                style="float: right"
                type="success"
                plain
                size="mini"
                @click="handleAdd"
                v-hasPermi="['system:group:add']"
              >新增方案
              </el-button>
              <el-table v-loading="loading" :data="groupList" @selection-change="handleSelectionChange">
                <el-table-column label="序号" align="center" type="index" width="60"/>
                <el-table-column label="方案名称" align="center" prop="name"/>
                <el-table-column label="工资项目" align="center" prop="salaryItems"/>
                <el-table-column label="备注" align="center" prop="remarks"/>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
                  <template slot-scope="scope">
                    <span v-if="scope.row.id === 1">默认模板</span>
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-edit"
                      v-if="scope.row.id !== 1"
                      @click="handleUpdate(scope.row)"
                      v-hasPermi="['system:group:edit']"
                    >修改
                    </el-button>
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      v-if="scope.row.id !== 1"
                      @click="handleDelete(scope.row)"
                      v-hasPermi="['system:group:remove']"
                    >删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </el-tab-pane>
            <el-tab-pane label="计算规则" name="second">
              <el-button
                style="float: right"
                type="success"
                plain
                size="mini"
                @click="addComputation"
                v-hasPermi="['system:group:add']"
              >新增计算规则
              </el-button>

              <el-table v-loading="loading" :data="rulesList">
                <el-table-column type="index" label="序号" align="center" width="60"/>
                <el-table-column prop="proName" label="方案名称" align="center"/>
                <el-table-column prop="performanceType" label="规则类型" align="center"/>
                <el-table-column prop="comName" label="薪酬组" align="center"/>
                <el-table-column prop="remarks" label="备注" align="center"/>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-edit"
                      @click="editComputation(scope.row)"
                    >修改
                    </el-button>
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click="deleteComputation(scope.row)"
                    >删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <pagination
                v-show="perTotal>0"
                :total="perTotal"
                :page.sync="perParams.pageNum"
                :limit.sync="perParams.pageSize"
                @pagination="getPerRules"
              />
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane name="second">
          <el-button style="float: left;margin-right: 30px" @click="goSecondBack()">返回</el-button>
          <div style="margin-left: 100px">
            <h1>新增计薪规则</h1>
          </div>
          <br>
          <div style="margin-left: 50px">
            <span style="font-size: 20px">使用指南</span>
            <br>
            <span style="font-size: 13px">
                1、一个计薪方案内设置一种规则类型类型以及计算规则，如企业有多个规则类型或不同规则，请保存后继续新增计薪方案。
              <br>
                2、结果计入项可以选择“薪酬设置"内薪酬结构的工资项目，设置方案前请提前设置企业需要的工资项目。
            </span>
          </div>
          <br>
          <div>
            <span class="el-icon-setting"></span>&nbsp;
            <span style="font-size: 20px">基本设置</span>
            <hr>
            <el-form :rules="projectRules" ref="Form" label-position="right" label-width="120px"
                     :model="projectForm">
              <el-form-item prop="proName" label="方案名称">
                <el-input style="width: 200px" v-model="projectForm.proName" placeholder="请输入名称"></el-input>
              </el-form-item>
              <el-form-item prop="compenId" label="选择薪酬组">
                <el-select v-model="projectForm.compenId" placeholder="请选择">
                  <el-option v-for="item in groupList"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="remarks" label="备注">
                <el-input v-model="projectForm.remarks" style="width: 200px"/>
              </el-form-item>
              <el-form-item label="规则类型">
                <el-button v-if="projectForm.performanceType === '销售提成'" type="primary" @click="typeChange(1)">销售提成</el-button>
                <el-button v-if="projectForm.performanceType !== '销售提成'" @click="typeChange(1)">销售提成</el-button>
                <el-button v-if="projectForm.performanceType === '招聘提成'" type="primary" @click="typeChange(2)">招聘提成</el-button>
                <el-button v-if="projectForm.performanceType !== '招聘提成'" @click="typeChange(2)">招聘提成</el-button>
                <el-button v-if="projectForm.performanceType === '奖金'" type="primary" @click="typeChange(3)">奖金</el-button>
                <el-button v-if="projectForm.performanceType !== '奖金'" @click="typeChange(3)">奖金</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div v-if="projectForm.performanceType === '销售提成'">
            <span class="el-icon-s-custom"></span>&nbsp;
            <span style="font-size: 20px">销售提成计算规则</span>
            <hr>
            <el-form ref="projectForm" :rules="projectRules" label-position="right" label-width="120px"
                     :model="projectForm">
              <el-form-item prop="countType" label="选择计算类型">
                <el-select @change="changeCountType" v-model="projectForm.countType" placeholder="请选择">
                  <el-option label="按照金额固定比例" value="按照金额固定比例"></el-option>
                  <el-option label="按销售额阶梯计算" value="按销售额阶梯计算"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="period" label="核算周期">
                <el-select v-model="projectForm.period" placeholder="请选择">
                  <el-option label="月" value="月"></el-option>
                  <el-option label="季" value="季"></el-option>
                  <el-option label="年" value="年"></el-option>
                </el-select>
                &nbsp;&nbsp;<el-button v-if="projectForm.countType === '按销售额阶梯计算'" @click="addForm" type="text">添加
              </el-button>
              </el-form-item>

              <el-form-item style="margin-bottom: 3px" v-if="projectForm.countType === '按销售额阶梯计算'"
                            v-for="(item,index) in projectForm.performanceRules">
                <el-input :disabled="true" oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                          v-model="item.money1"
                          style="width: 160px">
                  <template slot="append">元</template>
                </el-input>
                &nbsp;
                <el-select style="width: 70px" v-model="item.character1" placeholder="请选择">

                  <el-option label="<=" value="<="></el-option>
                </el-select>
                &nbsp;
                销售额
                &nbsp;
                <el-select style="width: 70px" v-model="item.character2" placeholder="请选择">
                  <el-option label="<" value="<"></el-option>

                </el-select>
                &nbsp;
                <el-input @input="inputMoney(item,index)" oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                          v-model="item.money2"
                          style="width: 160px">
                  <template slot="append">元</template>
                </el-input>

                &nbsp;，按销售额 ×&nbsp;
                <el-input oninput="this.value = this.value.replace(/[^0-9]/g, '');" v-model="item.scale"
                          style="width: 160px">
                  <template slot="append">%</template>
                </el-input>
                &nbsp;&nbsp;&nbsp;<el-button v-if="index > 0" @click="delLin(index)" type="text">删除</el-button>
                <br>
                <span style="font-size: 14px;color: red;margin-left: 400px">{{ item.msg }}</span>

              </el-form-item>
              <el-form-item v-if="projectForm.countType === '按照金额固定比例'">
                销售额 × &nbsp;&nbsp;
                <el-input oninput="this.value = this.value.replace(/[^0-9]/g, '');" v-model="projectForm.scale"
                          style="width: 160px">
                  <template slot="append">%</template>
                </el-input>

              </el-form-item>
            </el-form>
          </div>
          <div v-if="projectForm.performanceType === '招聘提成'">
            <span class="el-icon-s-custom"></span>&nbsp;
            <span style="font-size: 20px">招聘提成计算规则</span>
            <hr>
            <el-form :rules="projectRules" ref="projectForm" label-position="right" label-width="120px"
                     :model="projectForm">
              <el-form-item prop="countType" label="选择计算类型">
                <el-select @change="changeCountType" v-model="projectForm.countType" placeholder="请选择">
                  <el-option label="按照固定招聘人数比例" value="按照固定招聘人数比例"></el-option>
                  <el-option label="按额阶梯招聘人数计算" value="按额阶梯招聘人数计算"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="period" label="核算周期">
                <el-select v-model="projectForm.period" placeholder="请选择">
                  <el-option label="月" value="月"></el-option>
                  <el-option label="季" value="季"></el-option>
                  <el-option label="年" value="年"></el-option>
                </el-select>
                &nbsp;&nbsp;<el-button v-if="projectForm.countType === '按额阶梯招聘人数计算'" @click="addForm" type="text">添加
              </el-button>
              </el-form-item>

              <el-form-item style="margin-bottom: 3px" v-if="projectForm.countType === '按额阶梯招聘人数计算'"
                            v-for="(item,index) in projectForm.performanceRules">
                <el-input :disabled="true" oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                          v-model="item.money1"
                          style="width: 160px">
                  <template slot="append">人</template>
                </el-input>
                &nbsp;
                <el-select style="width: 70px" v-model="item.character1" placeholder="请选择">
                  <el-option label="<=" value="<="></el-option>
                </el-select>
                &nbsp;
                招聘人数
                &nbsp;
                <el-select style="width: 70px" v-model="item.character2" placeholder="请选择">
                  <el-option label="<" value="<"></el-option>
                </el-select>
                &nbsp;
                <el-input @input="inputMoney(item,index)" oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                          v-model="item.money2"
                          style="width: 160px">
                  <template slot="append">人</template>
                </el-input>
                &nbsp;，招聘人数 ×&nbsp;
                <el-input oninput="this.value = this.value.replace(/[^0-9]/g, '');" v-model="item.scale"
                          style="width: 160px">
                  <template slot="append">金额</template>
                </el-input>
                &nbsp;&nbsp;&nbsp;<el-button v-if="index > 0" @click="delLin(index)" type="text">删除</el-button>
                <br>
                <span style="font-size: 14px;color: red;margin-left: 400px">{{ item.msg }}</span>
              </el-form-item>
              <el-form-item v-if="projectForm.countType === '按照固定招聘人数比例'">
                招聘人数 × &nbsp;&nbsp;
                <el-input oninput="this.value = this.value.replace(/[^0-9]/g, '');" v-model="projectForm.scale"
                          style="width: 160px">
                  <template slot="append">金额</template>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div v-if="projectForm.performanceType === '奖金'">
            <span class="el-icon-s-custom"></span>&nbsp;
            <span style="font-size: 20px">奖金计算规则</span>
            <hr>
            <el-form :rules="projectRules" ref="projectForm" label-position="right" label-width="120px"
                     :model="projectForm">
              <el-form-item prop="countType" label="选择计算类型">
                <el-select @change="changeCountType" v-model="projectForm.countType" placeholder="请选择">
                  <el-option label="按照固定招聘人数比例" value="按照固定招聘人数比例"></el-option>
                  <el-option label="按额阶梯招聘人数计算" value="按额阶梯招聘人数计算"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="period" label="核算周期">
                <el-select v-model="projectForm.period" placeholder="请选择">
                  <el-option label="月" value="月"></el-option>
                  <el-option label="季" value="季"></el-option>
                  <el-option label="年" value="年"></el-option>
                </el-select>
                &nbsp;&nbsp;<el-button v-if="projectForm.countType === '按额阶梯招聘人数计算'" @click="addForm" type="text">添加
              </el-button>
              </el-form-item>

              <el-form-item style="margin-bottom: 3px" v-if="projectForm.countType === '按额阶梯招聘人数计算'"
                            v-for="(item,index) in projectForm.performanceRules">
                <el-input :disabled="true" oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                          v-model="item.money1"
                          style="width: 160px">
                  <template slot="append">人</template>
                </el-input>
                &nbsp;
                <el-select style="width: 70px" v-model="item.character1" placeholder="请选择">
                  <el-option label="<=" value="<="></el-option>
                </el-select>
                &nbsp;
                招聘人数
                &nbsp;
                <el-select style="width: 70px" v-model="item.character2" placeholder="请选择">
                  <el-option label="<" value="<"></el-option>
                </el-select>
                &nbsp;
                <el-input @input="inputMoney(item,index)" oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                          v-model="item.money2"
                          style="width: 160px">
                  <template slot="append">人</template>
                </el-input>
                &nbsp;，招聘人数 ×&nbsp;
                <el-input oninput="this.value = this.value.replace(/[^0-9]/g, '');" v-model="item.scale"
                          style="width: 160px">
                  <template slot="append">金额</template>
                </el-input>
                &nbsp;&nbsp;&nbsp;<el-button v-if="index > 0" @click="delLin(index)" type="text">删除</el-button>
                <br>
                <span style="font-size: 14px;color: red;margin-left: 400px">{{ item.msg }}</span>
              </el-form-item>
              <el-form-item v-if="projectForm.countType === '按照固定招聘人数比例'">
                招聘人数 × &nbsp;&nbsp;
                <el-input oninput="this.value = this.value.replace(/[^0-9]/g, '');" v-model="projectForm.scale"
                          style="width: 160px">
                  <template slot="append">金额</template>
                </el-input>
              </el-form-item>
            </el-form>
          </div>

          <div style="text-align: center">
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    <!-- 添加或修改薪酬组对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" :close-on-click-modal='false' append-to-body
               border>
      <el-divider></el-divider>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="方案名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入方案名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="form.remarks" placeholder="请输入备注"/>
            </el-form-item>
          </el-col>

        </el-row>
        <div v-for="salary in salaryItemList" :dataformatas="salaryItemList">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item :label="salary.tname" prop="tname">
                <el-checkbox v-model="checkboxGroup1" v-for="name in salary.names" :label="name" :key="name" border>
                </el-checkbox>
                <!--                <el-checkbox-group v-model="checkboxGroup1"   >-->
                <!--                  <el-checkbox-button   v-for="name in salary.names" :label="name" :key="name" ></el-checkbox-button>-->
                <!--                </el-checkbox-group>-->
              </el-form-item>
            </el-col>

          </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import {
    listGroup,
    getGroup,
    delGroup,
    addGroup,
    updateGroup,
    salaryItemlist,
    addPerformanceRules,
    getComByType,
    getPerRules,
    getRulesByComId,
    getPerRuleById,
    updatePerformanceRules,
    deleteComputation
  } from "@/api/system/group";
  import Template from "@/views/system/email/ItoTemplate";

  export default {
    name: "Group",
    components: {Template},
    data() {
      return {
        type: 'primary',
        type2: '',
        type3: '',
        rulesList: [],
        projectForm: {
          id: undefined,
          countType: '按照金额固定比例',
          period: '',
          remarks: '',
          proName: '',
          compenId: undefined,
          performanceRules: [],
          scale: undefined,
          performanceType: '销售提成'
        },
        activeName: 'first',
        active: 'first',
        // 遮罩层
        loading: true,
        perTotal: 0,
        names: [],
        salaryItemList: {},
        // 选中数组
        checkboxGroup1: [],
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 【请填写功能名称】表格数据
        groupList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          salaryItems: null,
          remarks: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          name: [
            {required: true, message: '请输入方案名称', trigger: 'blur'}
          ]
        },
        projectRules: {
          proName: [
            {required: true, message: '请输入方案名称', trigger: 'blur'}
          ],
          compenId: [
            {required: true, message: '请选择薪酬组', trigger: 'change'}
          ],
          typeName: [
            {required: true, message: '请选择规则类型', trigger: 'blur'}
          ],
          countType: [
            {required: true, message: '请选择薪计算类型', trigger: 'change'}
          ],
          period: [
            {required: true, message: '请选择核算周期', trigger: 'change'}
          ]
        },
        perParams: {
          pageSize: 10,
          pageNum: 1
        }
      };
    },
    created() {
      this.getList();
      this.getPerRules()
      salaryItemlist().then(response => {
        this.salaryItemList = response.rows
        for (let i = 0; i < this.salaryItemList.length; i++) {
          this.names = this.salaryItemList[i].name.split(",")
          this.salaryItemList[i].names = this.salaryItemList[i].name.split(",")
        }
      })
    },
    methods: {
      inputMoney(item, index) {
        console.log(item)
        if (this.projectForm.performanceRules[index + 1] !== undefined) {
          this.projectForm.performanceRules[index + 1].money1 = item.money2
        }
        if (parseInt(item.money2) <= parseInt(item.money1)) {
          this.projectForm.performanceRules[index].msg = "请输入正确的上下限"
        } else {
          this.projectForm.performanceRules[index].msg = ""
        }
      },
      editComputation(row) {
        getPerRuleById(row.id).then(res => {
          console.log(res)
          this.projectForm = res.data
          this.projectForm.performanceRules.map(p => {
            if (p.character1 === '&lt;') {
              p.character1 = '<'
            } else if (p.character1 === '&lt;=') {
              p.character1 = '<='
            }
            if (p.character2 === '&lt;') {
              p.character2 = '<'
            } else if (p.character2 === '&lt;=') {
              p.character2 = '<='
            }
          })
          this.addComputation()
        })
      },
      deleteComputation(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteComputation(row.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getPerRules();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      changeCountType() {
        if (this.projectForm.countType === '按照金额固定比例' || this.projectForm.countType === '按照固定招聘人数比例') {
          this.projectForm.performanceRules = []
        } else {
          this.projectForm.performanceRules = [
            {
              money1: 0,
              character1: '<=',
              money2: 0,
              character2: '<',
              scale: 0
            }
          ]
          this.projectForm.scale = undefined
        }
      },
      onSubmit() {
        this.$refs["Form"].validate(valid => {
          if (valid) {
            if (this.projectForm.id !== undefined) {
              this.$refs["projectForm"].validate(valid => {
                if (valid) {
                  if (this.projectForm.countType === '按照金额固定比例' && (this.projectForm.scale === undefined || this.projectForm.scale === '')) {
                    this.$message({
                      message: '请填写金额比例',
                      type: 'warning'
                    });
                  } else if (this.projectForm.countType === '按照固定招聘人数比例' && (this.projectForm.scale === undefined || this.projectForm.scale === '')) {
                    this.$message({
                      message: '请填写金额',
                      type: 'warning'
                    });
                  } else if (this.projectForm.countType === '按销售额阶梯计算' && (this.projectForm.performanceRules === undefined || this.projectForm.performanceRules.length === 0)) {
                    this.$message({
                      message: '请至少添加一条规则',
                      type: 'warning'
                    });
                  } else if (this.projectForm.countType === '按额阶梯招聘人数计算' && (this.projectForm.performanceRules === undefined || this.projectForm.performanceRules.length === 0)) {
                    this.$message({
                      message: '请至少添加一条规则',
                      type: 'warning'
                    });
                  } else {
                    getComByType(this.projectForm.compenId, this.projectForm.performanceType).then(res => {
                      if (res.data.length > 0) {
                        updatePerformanceRules(this.projectForm).then(res => {
                          this.$message({
                            message: '修改成功',
                            type: 'success'
                          });
                          this.getPerRules()
                          this.goSecondBack()
                        })
                      } else {
                        this.$message({
                          message: '当前薪酬组下无此规则类型 ',
                          type: 'warning'
                        });
                      }
                    })
                  }
                }
              })
            } else {
              this.$refs["projectForm"].validate(valid => {
                if (valid) {
                  if (this.projectForm.countType === '按照金额固定比例' && (this.projectForm.scale === undefined || this.projectForm.scale === '')) {
                    this.$message({
                      message: '请填写金额比例',
                      type: 'warning'
                    });
                  } else if (this.projectForm.countType === '按照固定招聘人数比例' && (this.projectForm.scale === undefined || this.projectForm.scale === '')) {
                    this.$message({
                      message: '请填写金额',
                      type: 'warning'
                    });
                  } else if (this.projectForm.countType === '按销售额阶梯计算' && (this.projectForm.performanceRules === undefined || this.projectForm.performanceRules.length === 0)) {
                    this.$message({
                      message: '请至少添加一条规则',
                      type: 'warning'
                    });
                    if (this.projectForm.performanceRules[this.projectForm.performanceRules.length - 1].money2 <= this.projectForm.performanceRules[this.projectForm.performanceRules.length - 1].money1){
                      this.$message({
                        message: '请输入正确的上下限',
                        type: 'warning'
                      });
                    }
                  } else if (this.projectForm.countType === '按额阶梯招聘人数计算' && (this.projectForm.performanceRules === undefined || this.projectForm.performanceRules.length === 0)) {
                    this.$message({
                      message: '请至少添加一条规则',
                      type: 'warning'
                    });
                    if (this.projectForm.performanceRules[this.projectForm.performanceRules.length - 1].money2 <= this.projectForm.performanceRules[this.projectForm.performanceRules.length - 1].money1){
                      this.$message({
                        message: '请输入正确的上下限',
                        type: 'warning'
                      });
                    }
                  } else {
                    getComByType(this.projectForm.compenId, this.projectForm.performanceType).then(res => {
                      if (res.data.length > 0) {
                        getRulesByComId(this.projectForm.compenId, this.projectForm.performanceType).then(res => {
                          if (res.data.length > 0) {
                            this.$message({
                              message: '当前薪酬组下已存在此规则类型',
                              type: 'warning'
                            });
                          } else {
                            addPerformanceRules(this.projectForm).then(res => {
                              this.$message({
                                message: '添加成功',
                                type: 'success'
                              });
                              this.getPerRules()
                              this.goSecondBack()
                            })
                          }
                        })
                      } else {
                        this.$message({
                          message: '当前薪酬组下无此规则类型 ',
                          type: 'warning'
                        });
                      }
                    })
                  }
                }
              })
            }

          }
        })

      },
      typeChange(val) {
        if (val === 1) {
          this.type = 'primary'
          this.type2 = ''
          this.type3 = ''
          this.projectForm.countType = '按照金额固定比例'
          this.projectForm.performanceType = '销售提成'
        } else if (val === 2) {
          this.type2 = 'primary'
          this.type = ''
          this.type3 = ''
          this.projectForm.countType = '按照固定招聘人数比例'
          this.projectForm.performanceType = '招聘提成'
        } else if (val === 3) {
          this.type3 = 'primary'
          this.type2 = ''
          this.type = ''
          this.projectForm.countType = '按照固定招聘人数比例'
          this.projectForm.performanceType = '奖金'
        }
        this.projectForm.period = ''
        this.projectForm.scale = undefined
        this.projectForm.performanceRules = []
      },
      delLin(index) {
        this.projectForm.performanceRules.splice(index, 1);
      },
      addForm() {
        if (this.projectForm.performanceRules[this.projectForm.performanceRules.length - 1].money2 > this.projectForm.performanceRules[this.projectForm.performanceRules.length - 1].money1) {
            const newTab = {
              money1: this.projectForm.performanceRules[this.projectForm.performanceRules.length - 1].money2,
              character1: '<=',
              money2: 0,
              character2: '<',
              scale: 0
            }
            this.projectForm.performanceRules.push(newTab);
        }
      },
      goSecondBack() {
        this.projectForm = {
          countType: '按照金额固定比例',
          period: '',
          remarks: '',
          proName: '',
          compenId: undefined,
          performanceRules: [],
          scale: undefined,
          performanceType: '销售提成'
        }
        this.active = 'first'
        this.activeName = 'second'
      },
      //新增计算规则
      addComputation() {
        this.active = 'second'
      },
      /** 查询【请填写功能名称】列表 */
      getList() {
        this.loading = true;
        listGroup(this.queryParams).then(response => {
          this.groupList = response.rows;
          this.total = response.total;
        });
        this.loading = false;
      },
      getPerRules() {
        getPerRules(this.perParams).then(res => {
          this.rulesList = res.rows
          this.perTotal = res.total
        })
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          salaryItems: null,
          remarks: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },


      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "新增薪酬方案";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getGroup(id).then(response => {
          this.form = response.data;
          this.checkboxGroup1 = this.form.salaryItems.split(",")
          console.log(this.checkboxGroup1)
          this.open = true;
          this.title = "修改";
        });
      },
      /** 提交按钮 */
      submitForm() {

        this.form.salaryItems = '';
        for (let i = 0; i < this.checkboxGroup1.length; i++) {
          if (i != this.checkboxGroup1.length - 1) {
            this.form.salaryItems += this.checkboxGroup1[i] + ','
          } else {
            this.form.salaryItems += this.checkboxGroup1[i]
          }
        }
        console.log(this.form)
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateGroup(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.checkboxGroup1 = [];
                this.open = false;
                this.getList();
              });
            } else {
              addGroup(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.checkboxGroup1 = [];
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + ids + '"的数据项？').then(function () {
          return delGroup(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/group/export', {
          ...this.queryParams
        }, `group_${new Date().getTime()}.xlsx`)
      }
    },
    mounted() {
      //tab标签的权限控制
      this.$nextTick(() => {
        this.$refs.tabs.$children[0].$refs.tabs[0].style.display = 'none';
        this.$refs.tabs.$children[0].$refs.tabs[1].style.display = 'none';
      });
    }
  };
</script>

<style>

</style>
